<template>
  <div class="knowledge-detail">
    <!-- 返回和标题 -->
    <div class="header">
      <div class="title-row">
        <el-link :underline="false" class="back" @click="router.back()">
          <el-icon><ArrowLeft /></el-icon>
          返回知识库
        </el-link>
        <el-divider direction="vertical" />
        <span class="title">{{ route.query.name }}</span>
      </div>
    </div>

    <!-- 上传区域 -->
    <div class="upload-area">
      <el-upload
        class="upload-box"
        drag
        action="#"
        :auto-upload="false"
        :show-file-list="false"
        @change="handleFileChange"
      >
        <el-icon class="upload-icon"><Upload /></el-icon>
        <div class="upload-text">点击上传或将文件拖放到此处</div>
        <div class="upload-tip">单份文件大小上限100MB，支持文件类型：pdf、docx、doc、xlsx、xls</div>
      </el-upload>
    </div>

    <!-- 文件列表 -->
    <div class="file-list" v-if="fileList.length > 0">
      <el-table :data="currentPageData" style="width: 100%">
        <el-table-column type="index" label="#" width="60" />
        <el-table-column prop="fileName" label="文件名" min-width="200">
          <template #default="{ row }">
            <div class="file-name">
              <el-icon><Document /></el-icon>
              <span>{{ row.fileName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="文件大小" width="120" />
        <el-table-column prop="gmtCreate" label="上传时间" width="180" />
        <el-table-column prop="fileStatus" label="文件状态" width="120">
          <template #default="{ row }">
            <div class="status">
              <el-tag :type="row.fileStatus === 'FINISH' ? 'success' : 'warning'" size="small">
                {{ row.fileStatus === 'FINISH' ? '可引用' : '解析中...' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button type="text" style="color: rgb(36, 45, 72);" @click="handleRename(row)">重命名</el-button>
            <el-button type="text" style="color: #F56C6C;" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 重命名弹窗 -->
    <el-dialog
      v-model="renameDialogVisible"
      title="重命名"
      width="500px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <el-form :model="form" ref="formRef">
        <el-form-item 
          label="知识库名称" 
          prop="name"
          :rules="[{ required: true, message: '请输入知识库名称', trigger: 'blur' }]"
        >
          <el-input v-model="form.name" placeholder="请输入知识库名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="renameDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRenameSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowLeft, Upload, Document } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'

const router = useRouter()
const route = useRoute()
const knowledgeId = route.query.id
const knowledgeName = route.query.name

const formRef = ref<FormInstance>()
const renameDialogVisible = ref(false)
const form = ref({
  name: '',
  id: null as number | null
})

const fileList = ref([
  {
    id: 26240,
    fileId: "dc65648dab9dc719d314d1b234465556",
    fileName: "111",
    fileType: "DOC",
    fileSize: "9.00 KB",
    fileStatus: "GENERATING",
    gmtCreate: "2025.03.20 18:18",
    fileCategory: "KNOWLEDGE"
  },
  {
    id: 26239,
    fileId: "78683a596c655e9749ed0fcd44c431e2",
    fileName: "111",
    fileType: "DOC",
    fileSize: "9.00 KB",
    fileStatus: "FINISH",
    gmtCreate: "2025.03.20 18:18",
    fileCategory: "KNOWLEDGE"
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = computed(() => fileList.value.length)

// 当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return fileList.value.slice(start, end)
})

// 处理每页条数改变
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1  // 重置到第一页
}

// 处理页码改变
const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

const handleFileChange = (file: any) => {
  console.log('选择文件:', file)
  // TODO: 处理文件上传
}

const handleDelete = (row: any) => {
  console.log('删除文件:', row)
  // TODO: 处理文件删除
}

const handleRename = (row: any) => {
  form.value.name = row.fileName
  form.value.id = row.id
  renameDialogVisible.value = true
}

const handleRenameSubmit = async () => {
  await formRef.value?.validate()
  console.log('重命名为:', form.value.name)
  renameDialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.knowledge-detail {
  padding: 20px;

  .header {
    margin-bottom: 24px;

    .title-row {
      display: flex;
      align-items: center;
      gap: 8px;

      .back {
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 4px;

        .el-icon {
          font-size: 16px;
        }
      }

      .el-divider {
        height: 20px;
        margin: 0 12px;
      }

      .title {
        font-size: 18px;
        color: #303133;
      }
    }
  }

  .upload-area {
    margin-bottom: 24px;

    .upload-box {
      :deep(.el-upload-dragger) {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f9fafb;
      }

      .upload-icon {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 16px;
      }

      .upload-text {
        font-size: 16px;
        color: #409EFF;
        margin-bottom: 8px;
      }

      .upload-tip {
        font-size: 14px;
        color: #909399;
      }
    }
  }

  .file-list {
    .file-name {
      display: flex;
      align-items: center;
      gap: 8px;

      .el-icon {
        color: #909399;
      }
    }

    :deep(.el-button--text) {
      padding: 0;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }
    }

    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
